<template>
 <div>
   <el-form
       :model="form"
       ref="formRef"
       label-width="108px"
       :inline="true" :rules="rules"
   >
     <el-form-item prop="cycle" label="质量周报期数:"  label-width="100px">
       <el-input v-model="form.cycle"></el-input>
     </el-form-item>
<!--     <el-table
         :data="form.curWeekTableOne"
         style="width: 100%" border
     >
       <el-table-column type="index" width="55" align="center">
       </el-table-column>
       <el-table-column label="姓名" prop="receiveThisWeek"  align="center" header-align="center">
         <template slot-scope="scope">
           <el-form-item :prop="'curWeekTableOne.' + scope.$index + '.receiveThisWeek'" :rules="rules.receiveThisWeek">
             <el-input type="text" size="small" placeholder="请输入姓名" v-model="scope.row.receiveThisWeek"></el-input>
           </el-form-item>
         </template>
       </el-table-column>
     </el-table>-->


     <component :is="`TableCom`" :tableData="form.curWeekTableOne" ref="child"></component>

   </el-form>
   <el-button @click="submit()">提交验证</el-button>

   <div>
     <el-table  :data="tableData" border stripe>
       <el-table-column
           label="时间"
           align="left"
           width="180">
         <el-table-column
             label="统计方法"
             align="left"
             width="180">
           <el-table-column
               prop="statisticalMode"
               label="专业"
               align="left"
               width="180">
           </el-table-column>
         </el-table-column>
       </el-table-column>
       <el-table-column prop="year" label="机械类型" width="150" align="center">
         <el-table-column prop="year" label="排放参数" align="center" width="150"></el-table-column>
       </el-table-column>
       <el-table-column prop="fenopda" label="挖掘机（千克）" align="center"></el-table-column>
       <el-table-column prop="dwaiod" label="推土机（千克）" align="center"></el-table-column>
       <el-table-column prop="date" label="装载机（千克）" align="center"></el-table-column>
       <el-table-column prop="name" label="叉车（千克）" align="center"></el-table-column>
       <el-table-column prop="province" label="压路机（千克）" align="center"></el-table-column>
       <el-table-column prop="city" label="摊铺机（千克）" align="center"></el-table-column>
       <el-table-column prop="address" label="平地机（千克）" align="center"></el-table-column>
       <el-table-column prop="zip" label="其他（千克）" align="center"></el-table-column>
     </el-table>
   </div>


   <h1>我是父组件的按钮
     <el-button @click="triggerChildFun">调用子组件的方法</el-button>
     <el-button @click="triggerSonFun">调用孙子组件的多表单验证方法</el-button>
   </h1>

   <h1><el-button @click="showPreview" type="primary" plain>公共组件</el-button></h1>
   <h1><el-button @click="showConfirm" type="primary" plain>公共组件1</el-button></h1>

 </div>
</template>
<script >
import TableCom from './table.vue'
import {openPreview} from './component/index'
import {selectUserFn} from './confirm/index'
export default {
  components:{
    TableCom
  },
  provide() {
    return {
      thisParent:this,
      getSonValue:this.getSonValue
    }
  },
  data(){
    return{
      form:{
        cycle:'',
        curWeekTableOne:[{receiveThisWeek:''},{receiveThisWeek:''}]
      },
      rules: {
        cycle:[{ required: true, message: "请输入周期", trigger: "blur" }],
        receiveThisWeek: [{ required: true, message: "请选择承###", trigger: "blur" }],
      },
      //模拟的假数据
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路',
        zip: 200333,
        dwaiod:"154",
        fenopda:"89",
        year:"12178"
      }],
      thirdPartyTestingStatsList: [
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "RT",
          "testUnit": "张",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "UT",
          "testUnit": "米",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "PT",
          "testUnit": "米",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "MT",
          "testUnit": "米",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "TODF",
          "testUnit": "米",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "光谱",
          "testUnit": "点",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "无损及理化检测",
          "testItem": "硬度",
          "testUnit": "点",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "地基检测",
          "testItem": "桩的承载力检测",
          "testUnit": "次",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "地基检测",
          "testItem": "桩身完整性检测",
          "testUnit": "个",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "地基检测",
          "testItem": "地基及复合地基承载力检测",
          "testUnit": "次",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "原材料检测（钢筋.砌块.高强螺栓.水泥.沙石等）",
          "testUnit": "组",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "混凝土试块",
          "testUnit": "组",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "压实度检测",
          "testUnit": "组",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "砌筑砂浆试块",
          "testUnit": "组",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "工程实体与使用功能检测（钢筋保护层厚度、混凝土强度等）",
          "testUnit": "次",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "门窗性能检测（气密性、水密性、抗风压）、室内环境污染物等",
          "testUnit": "批",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        },
        {
          "id": "",
          "reportId": "",
          "testGroup": "土建见证",
          "testItem": "涂料检测（防火涂料、防水涂料、防腐涂料等）",
          "testUnit": "批",
          "testThisWeek": "",
          "testTotal": "",
          "unqualifiedThisWeek": "",
          "unqualifiedTotal": "",
          "qualifiedPercentageThisWeek": "",
          "qualifiedPercentageTotal": "",
          "oldTestTotal": "",
          "oldUnqualifiedTotal": ""
        }
      ],
    }
  },
  methods:{
    submit(){
      this.$refs.formRef.validate(valid => {

        console.log("----valid:",valid)
        if (valid) {


        }
      })
      console.log("[].join(','):",[].join(','))
      this.formatTableData(this.thirdPartyTestingStatsList)
    },
    formatTableData(tableData){
      let formatData = this.groupById(tableData,'testGroup') //根据单项名称分堆，将相同的单项分到一起
      // console.log("formData:",formatData)
      let arr = []
      let num = 0
      for (let i in formatData){
        num = num + 1
        formatData[i].map((item,index)=>{ //添加序号
           item.index = num + '.' + (index+1)
        })
        let a = [{testGroup:i,spanCol:true,index:num},...formatData[i]] //给需要合并的行添加属性‘spanCol=true’
        arr.push(...a)
      }
      // console.log("arr:",arr)
      return arr ;
    },
    //分堆 返回结果:{'土建见证':[{},{}...],'地基检测':[{},{}...],...}
    groupById(arr, idKey) {
      return arr.reduce((acc, obj) => {
        const id = obj[idKey];
        if (!acc[id]) acc[id] = [];
        acc[id].push(obj);
        return acc;
      }, {});
    },
    getSonValue(val){
      console.log("----------:",val)
    },
    triggerChildFun(){
       this.$refs.child.$emit("childFunc")
    },
    triggerSonFun(){
       this.$refs.child.$refs.grandson.$emit("sonFunc")

       let flag =   this.$refs.child.$refs.grandson.sonFunc() ;
       console.log("爷爷组件调用孙子组件的表单验证结果：",flag)
    },
    showPreview(){
      openPreview({
        row:{links:'我是测试的links'} ,
        submit(){
          console.log("提交")
          this.showText() ;
        },
        cancel(){
          console.log("取消")
        }
      })
    },
    showText(){
      console.log("-------------")
    },
    showConfirm(){
      selectUserFn({
          type: 1, //类型(1单选人2多选人3岗位)默认单选必填
          selectData: this.SelectData, //回显数据
          showChildren: true, //是否展示子层级默认不展示
          treeOrgInfo: {
            orgId: "so22120617500200000410135",
            orgName: "哈哈哈",
            orgType: 2
          }, //展示项目树的信息(默认当前项目的信息)
          orgTreeList: null, //组织树可选默认展示当前项目层级
          success: (data) => {
            console.log("点击了确定", data);
            this.SelectData = data;//深层对象赋值用$set赋值
            this.showText() ;
          },
          cancel: () => {
            console.log("点击了取消");
          }
        });
      }
  }
}
</script>
<style scoped>
/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep  .el-table thead.is-group th {
  background: none;
  padding: 0px;
}

::v-deep .el-table thead.is-group tr:nth-of-type(2) th:first-of-type {
  border-bottom: none;/*中间的横线去掉*/
}

::v-deep .el-table thead.is-group tr:nth-of-type(2) th:first-of-type div.cell {
  text-align: right;/*上边文字靠右*/
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left;/*下边文字靠左*/
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:nth-of-type(2) th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px;/*斜线的长度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-43deg);/*调整斜线的角度*/
  transform: rotate(-75deg);/*调整斜线的角度*/
  -webkit-transform-origin: top;
  transform-origin: top;
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px;/*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-45deg);/*调整斜线的角度*/
  transform: rotate(-75deg);/*调整斜线的角度*/
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th{
  height: 24.4px;
}
</style>
